<template>
<!--  <div id="map-container" ref="mapContainer" class="gep-map-container"></div>-->
  <div  ref="mapContainer" class="gep-map-container"></div>


</template>

<script setup>
import {ref, watch, onMounted,onBeforeMount} from 'vue';
import * as echarts from 'echarts';
import {selectGepResult} from "@/api/gepApi"
import "echarts-gl";
import shangluo from '../../assets/json/611000/shangluo.json';
import shangzhou from '../../assets/json/611000/shangzhou.json';
import luonan from '../../assets/json/611000/luonan.json';
import danfeng from '../../assets/json/611000/danfeng.json';
import shangnan from '../../assets/json/611000/shangnan.json';
import shanyang from '../../assets/json/611000/shanyang.json';
import zhenan from '../../assets/json/611000/zhenan.json';
import zuoshui from '../../assets/json/611000/zhashui.json';
import pinyin from "pinyin";
import {useGepDataStore} from "@/stores/gep";
import {storeToRefs} from "pinia";

const maps = {
  'shangzhou': shangzhou,
  'shanyang': shanyang,
  'zhenan': zhenan,
  'luonan': luonan,
  'danfeng': danfeng,
  'shangnan': shangnan,
  'zuoshui': zuoshui,
  'shangluo': shangluo
};

let myChart = ref(null);
// const allData = [
//   {name: '营盘镇', value: 396},
//   {name: '柞水县', value: 66},
//   {name: '商南县', value: 222},
//   {name: '丹南县', value: 688},
//   {name: '寺耳镇', value: 688},
// ];

let allData = [];

const mapContainer = ref(null);

const gepDataStore = useGepDataStore();

const {
  gepResultArea,
  gepTown,
  gepDistrict,
  gepCity,
  gepYear,
  gepValue,
  count,
  isSubmitted
} = storeToRefs(gepDataStore);

watch(count, () => {
  updataLableData(gepYear.value)
})

async function updataLableData(gepYear) {
  // async 等待 selectGepResult 函数的结果
  const gepMapLabelData = await selectGepResult(gepYear)

  // console.log('gepMapLabelData', gepMapLabelData)
// 遍历 test 对象中的数据
  allData = [];
  for (const year in gepMapLabelData) {
    if (gepMapLabelData.hasOwnProperty(year)) {
      const dataArray = gepMapLabelData[year].data;

      dataArray.forEach(item => {
        const {gepResult, gepResultArea} = item; // 解构赋值
        allData.push({name: gepResultArea, value: gepResult});
      });
    }
  }
  // console.log('updataLableData', allData)
}

// 检测gepDistrict：实现地区选择框与地图组件的互动 当gepDistrict为总计转换成商洛市，否则为各地区名字转换
watch(gepDistrict, (oldValue, newValue) => {

  // console.log('oldValue, newValue', oldValue, newValue)
  // console.log('gepDistrict.value[0]', gepDistrict.value)
  if (gepDistrict.value === '总计') {
    updateMap('shangluo')
  } else {
    const pinyinName = pinyin(gepDistrict.value, {
      style: pinyin.STYLE_NORMAL
    })[0] + pinyin(gepDistrict.value, {
      style: pinyin.STYLE_NORMAL
    })[1]; // 获取第一个拼音结果
    // console.log('gepDistrict@@@', pinyinName)
    updateMap(pinyinName)
  }
})


onBeforeMount(() => {
  updataLableData(gepYear.value)
})
// 延迟加载地图图表
onMounted(() => {
  setTimeout(() => {

    chartInit();
    console.log("地图的数据如下allData",allData)
  }, 200);

});


function chartInit() {
  myChart = echarts.init(mapContainer.value);

  echarts.registerMap('shangluo', shangluo);

  myChart.setOption(getOption('shangluo'));
  window.addEventListener('resize', () => {
    myChart.resize();
  });

  myChart.on('click', function (params) {
    // console.log('params',params)
    if (params.componentType === 'series') {
      const mapName = params.name

      const pinyinName = pinyin(mapName, {
        style: pinyin.STYLE_NORMAL
      })[0] + pinyin(mapName, {
        style: pinyin.STYLE_NORMAL
      })[1]; // 获取第一个拼音结果
      // console.log('pinyinName',pinyinName)
      if (maps[pinyinName]) {
        updateMap(pinyinName);
      }
    }
  });
}

function getOption(mapName, zoomValue = 1.3) {
  return {
    // 图表背景颜色
    // backgroundColor: '#010d3a',

    // 地图组件配置
    geo: {
      // 指定使用的地图类型
      map: mapName,
      // 当前视角的缩放比例，1.0 为默认缩放
      zoom: zoomValue,
      // 地图的纵横比，调整地图的显示比例
      aspectScale: 0.85,
      // 地图中心的坐标，'50%' 表示居中
      layoutCenter: ['50%', '50%'],
      // 地图的大小
      layoutSize: '100%',
      // 是否允许缩放和平移地图
      roam: false,
      // 地图区域的样式
      itemStyle: {
        // 默认状态下的边框颜色
        borderColor: 'rgba(147, 235, 248, 1)',
        // 默认状态下的边框宽度
        borderWidth: 1,
        // 默认状态下的阴影颜色
        shadowColor: 'rgba(128, 217, 248, 1)',
        // 默认状态下的阴影偏移X值
        shadowOffsetX: 0,
        // 默认状态下的阴影偏移Y值
        shadowOffsetY: 15,
        // 默认状态下的阴影模糊度
        shadowBlur: 10,
      },
      emphasis: {
        // 高亮状态下的区域颜色
        areaColor: '#389BB7',
        // 高亮状态下的边框宽度
        borderWidth: 0,
      },
    },

    // 提示框配置
    tooltip: {
      // 是否显示提示框
      show: true,
      // 提示框内容格式化函数
      formatter: (params) => {
        if (params.data)
          return (
              '<span style="width:195px;height:35px;line-height:28px;float:left;font-size: 12px;color: #ffffff">&nbsp;&nbsp;' +
              params.name +
              '</span></br><span style="font-size: 16px;color: #ffffff;float:left;margin-top:50px;width:195px;height:35px;line-height:25px;">&nbsp;&nbsp;价值：' +
              params.data['value'] +
              '万元</span>'
          );
      },
      // 提示框的额外样式
      extraCssText:
          "background: url('https://www.makeapie.cn/asset/get/s/data-1630478118371-aR5gezvxy.png') no-repeat center center fixed;",
    },

    // 系列配置
    series: [
      {
        // 系列名称
        name: 'Map',
        // 系列类型
        type: 'map',
        // 使用的地图类型
        map: mapName,
        // 选中模式，'false' 表示不允许选择多个区域
        selectedMode: 'false',
        // 纵横比
        aspectScale: 0.85,
        // 地图中心的坐标
        layoutCenter: ['50%', '50%'],
        // 地图的大小
        layoutSize: '100%',
        // 是否允许缩放和平移地图
        roam: false,
        // 当前视角的缩放比例
        zoom: zoomValue,
        // 滚轮缩放的极限控制
        scaleLimit: {
          min: 1,
          max: 2,
        },
        label: {
          show: true,
          color: '#fff',
          // 标签文本字体大小
          fontSize: 20,
          fontWeight: 'bold',
        },
        // 区域的样式
        itemStyle: {
          // 默认状态下的区域颜色
          areaColor: 'rgba(0, 38, 66, 0.8)',
          // 默认状态下的边框颜色
          borderColor: '#FFFFFF',
        },
        emphasis: {

          // 高亮状态下的标签样式
          label: {
            show: true,
            // 标签文本颜色
            color: '#fff',
            // 标签文本字体大小
            fontSize: 24,
            fontWeight: 'bold',

          },
          itemStyle: {
            // 高亮状态下的边框颜色
            borderColor: '#FFF',
            // 高亮状态下的边框宽度
            borderWidth: '2',
            // 高亮状态下的阴影颜色
            shadowColor: 'rgba(255, 255, 255, 0.5)',
            // 高亮状态下的阴影模糊度
            shadowBlur: 5,
            // 高亮状态下的区域颜色渐变
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 2,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0, 38, 66, 1)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0, 38, 66, 0.1)', // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },

        },

        // 数据
        data: allData,
      },
    ],
  };
}

function updateMap(mapName) {
  echarts.dispose(myChart);
  myChart = echarts.init(mapContainer.value);
  echarts.registerMap(mapName, maps[mapName]);
  // console.log('mapName',mapName)
  if (mapName === 'shangzhou') {
    myChart.setOption(getOption(mapName, 1));
  } else {
    myChart.setOption(getOption(mapName));
  }
}


</script>

<style scoped>
.gep-map-container {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  margin: 20px 20px;

}
</style>